<!-- 常见问题 -->
<template>
	<view class="faq-box">
    <view class="faq-header">
      <view class="hello">
        <image :src="$IMG_URL + '/imgs/other/faq/smile.png'"></image>
        <view>很高兴为您提供服务~</view>
      </view>
      <view class="search">
        <image :src="$IMG_URL + '/imgs/other/faq/search.png'"></image>
        <input type="text" @input="searchFaq" placeholder="请输入您要了解的问题">
      </view>
    </view>
    <view class="lists-box">
      <u-collapse event-type="close" :arrow="true" :accordion="true" arrowColor="#333" :headStyle="headStyle" :itemStyle="itemStyle">
        <u-collapse-item :title="index + 1 + '、' + item.title" v-for="(item, index) in faqList" :key="index">{{ item.content }}</u-collapse-item>
      </u-collapse>
    </view>

		<!-- 更多 -->
		<u-loadmore v-if="faqList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			headStyle: {
				color: '#a8700d'
			},
			itemStyle: {
				borderBottom: '1rpx solid #eee',
				padding: '20rpx 0'
			},
			faqList: [],
      keyword: '',
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	computed: {},
	onLoad() {
		this.getFaqList();
		// 触底监听
		uni.$on('uOnReachBottom', () => {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getFaqList();
			}
		});
	},
	methods: {
    searchFaq(e){
      this.keyword = e.detail.value;
      this.faqList = [];
      this.currentPage = 1;
      this.lastPage = 1;
      this.getFaqList();
    },
		// 常见问题列表、
		getFaqList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$http('other.faqList', {
				page: that.currentPage,
        keyword: that.keyword
			}).then(res => {
				if (res.code === 1) {
					that.faqList = [...that.faqList, ...res.data.data];
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		}
	}
};
</script>

<style>
page{
  background: #f0f0f0;
}
</style>
<style lang="scss">
	.faq-box{
    margin-top: 30rpx;
    .faq-header{
      background-color: #fff;
      margin-bottom: 30rpx;
      padding: 30rpx;
      .hello{
        display: flex;
        font-size: 24rpx;
        align-items: center;
        image{
          margin-right: 20rpx;
          width: 50rpx;
          height: 50rpx;
        }
      }
      .search{
        display: flex;
        background: #e5e5e5;
        border-radius: 30rpx;
        margin-top: 30rpx;
        box-sizing: border-box;
        align-items: center;
        image{
          margin-right: 20rpx;
          width: 40rpx;
          height: 40rpx;
          margin-left: 10rpx;
        }
        input{
          flex-grow: 1;
          font-size: 22rpx;
          line-height: 22rpx;
          margin: 10rpx 0 ;
        }
      }
    }
    .lists-box{
      padding: 30rpx;
      background: #fff;
    }
	}
</style>
